<template>
  <com-card>
    <div slot="com_header">
      <el-alert
        style="padding-left: 470px"
        title="添加商品的信息"
        type="info"
        show-icon
      >
      </el-alert>
    </div>
    <div slot="com_con">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <!-- 标签栏 -->
      <el-row style="margin-top: 30px">
        <el-tabs :tab-position="tabPosition" style="height: 1200px" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="0">
            <el-form
              :model="Baseform"
              status-icon
              label-width="100px"
              class="demo-ruleForm"
            >
              <!--  -->
              <el-form-item label="商品名称">
                <el-input type="text" v-model="Baseform.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格">
                <el-input type="text" v-model.number="Baseform.goods_price"></el-input>
              </el-form-item>
              <el-form-item label="商品重量">
                <el-input v-model.number="Baseform.goods_weight"></el-input>
              </el-form-item>
              <el-form-item label="商品数量">
                <el-input v-model.number="Baseform.goods_number"></el-input>
              </el-form-item>

              <el-form-item label="商品分类">
                <el-cascader
                  v-model="selectkeys"
                  :options="typeOptions"
                  :props="{
                    expandTrigger: 'hover',
                    label: 'cat_name',
                    value: 'cat_id',
                  }"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="商品参数"  name="1">
            <!-- <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox> -->
            <el-form>
              <el-form-item v-for="(item, index) in paramslist" :key="index">
                <el-checkbox-group v-model="item.attr_vals">
                  <el-checkbox
                    v-for="(value, key) in item.attr_vals"
                    :label="value"
                    :key="key"
                    border
                    size="mini"
                    >{{ value }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2"
            >商品属性
            <el-form>
              <el-form-item
                v-for="(item, index) in staticlist"
                :label="item.attr_name"
                :key="index"
              >
                <el-input
                  size="mini"
                  v-model="item.attr_vals"
                  type="text"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="商品图片"  name="3">
            <el-upload
              action="http://127.0.0.1:8888/api/private/v1/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="shopImg_success"
              :file-list="fileList"
              :on-remove="handleRemove"
              :headers="headersobj"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-tab-pane>

          <el-tab-pane label="商品内容"  name="4"> 
            <el-form
              :model="Baseform"
              status-icon
              label-width="100px"
              class="demo-ruleForm"
            >
              <!--  -->
              <el-form-item label="商品内容">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="Baseform.goods_introduce"
                >
                </el-input> </el-form-item
            ></el-form>
          </el-tab-pane>
          <el-tab-pane label="完成"  name="5"> 
            <el-button @click="save">保存</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-row>

      <!-- 步骤下一步 -->
      <!-- <el-button style="margin-top: 2px" @click="next">下一步</el-button> -->
    </div>
  </com-card>
</template>

<script>
import ComCard from "../../components/card";
export default {
  components: {
    ComCard,
  },
  data() {
    return {
   
      // 上传图片
      dialogImageUrl: "",
      dialogVisible: false,

      active: 0,
      activeName:'0',

      // 基本信息添加
      Baseform: {
        goods_name: "", //名称
        goods_price: 0, //价格
        goods_number: 0, //数量
        goods_weight: 0, //重量
        pics: [], //该商品对应的图片数组
        goods_introduce: "", //商品描述
        goods_cat: "", //商品所属分类字符串
        attrs: [], //动态参数与静态参数属性
      },

      selectkeys: [], // 下拉框双向数据绑定
      typeOptions: [], //下拉框的数据源
      fileList: [], //图片地址列表
      imageUrl: "",
      // 定义文件上传的请求头,携带token信息
      headersobj: { Authorization: window.sessionStorage.getItem("token_bd") },

      // 标签页
      tabPosition: "left",

      //参数列表动态
      paramslist: [],
      //参数列表 静态
      staticlist: [],
    };
  },

  mounted() {
    this.queryType();
  },

  methods: {
       // 步骤条
      handleClick(){
        this.active=parseInt(this.activeName)
      },
    // 上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传图片成功
    shopImg_success(rst) {
      console.log(rst);
      this.Baseform.pics.push({ pic: rst.data.tmp_path });
    },

    // next() {
    //   if (this.active++ > 6) this.active = 0;
    // },

    // 获取所有商品分类
    async queryType() {
      let rst = await this.$http.get("categories");
      let { data, meta } = rst;
      this.typeOptions = data;
      console.log(rst);
    },

    //下拉框变化时
    handleChange() {
      this.Baseform.goods_cat = this.selectkeys.join();
      this.paramsQuery();
      this.staticQuery();
      console.log(this.Baseform.goods_cat);
    },

    // 保存添加商品
    async save() {
      this.paramslist.forEach((item) => {
        let { attr_id, attr_vals } = item;
        this.Baseform.attrs.push({
          attr_id: attr_id,
          attr_value: attr_vals.join(" "),
        });
      });
      this.staticlist.forEach((item) => {
        let { attr_id, attr_vals } = item;
        this.Baseform.attrs.push({
          attr_id: attr_id,
          attr_value: attr_vals,
        });
      });
      console.log(this.Baseform);
      let rst = await this.$http.post("goods", this.Baseform);
      if(rst.meta.status==201){
        this.active=6
        this.$message.success(rst.meta.msg)
      }
      console.log(rst);
    },

    //参数列表 动态
    async paramsQuery() {
      let rst = await this.$http.get(
        `categories/${this.selectkeys[this.selectkeys.length - 1]}/attributes`,
        { sel: "many" }
      );
      if (rst.meta.status == 200) {
        this.paramslist = rst.data;
        this.paramslist.forEach((item) => {
          if (item.attr_vals) {
            // 判断当前参数是否有值,当有值时则分隔为数组,当没有值时则赋值为空数组
            item.attr_vals =
              item.attr_vals.length === 0 ? [] : item.attr_vals.split(" ");
          }
        });
      }
      console.log(rst);
    },

    // 参数列表 静态
    async staticQuery() {
      let rst = await this.$http.get(
        `categories/${this.selectkeys[this.selectkeys.length - 1]}/attributes`,
        { sel: "only" }
      );
      this.staticlist = rst.data;
      console.log(rst);
    },
  },
};
</script>

<style lang="less" scoped>

</style>